<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>台州和群号码簿</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        :root {
            --primary-color: #333;
            --secondary-color: #666;
            --border-color: #ddd;
            --highlight-color: #f0f0f0;
            --error-color: #f44336;
            --success-color: #4CAF50;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            color: var(--primary-color);
            line-height: 1.6;
        }

        .container {
            max-width: 1024px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .title {
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            flex-grow: 1;
        }

        .date {
            font-size: 14px;
            color: var(--secondary-color);
            text-align: center;
            margin-top: 5px;
        }

        .action-buttons {
            display: flex;
        }

        .btn {
            padding: 8px 16px;
            margin: 0 5px;
            border: none;
            border-radius: 4px;
            background-color: #e0e0e0;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.1s;
            position: relative;
            overflow: hidden;
        }

        .btn:hover {
            background-color: #d0d0d0;
        }

        .btn:active {
            transform: scale(0.98);
        }

        /* 波纹效果 */
        .ripple {
            position: absolute;
            background: rgba(255, 255, 255, 0.7);
            border-radius: 50%;
            transform: scale(0);
            animation: ripple 0.6s linear;
            pointer-events: none;
        }

        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        .number-grid {
            display: grid;
            grid-template-columns: repeat(19, 1fr);
            border: 1px solid var(--border-color);
            margin-bottom: 20px;
        }

        .grid-cell {
            height: 40px;
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            position: relative;
        }

        .grid-header {
            background-color: #f0f0f0;
            font-weight: bold;
        }

        .grid-row {
            display: contents;
        }

        .grid-row:hover .grid-cell {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .grid-row.selected .grid-cell {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .symbol {
            font-size: 24px;
            font-weight: bold;
        }

        .number {
            color: #f00;
            font-weight: bold;
        }

        .circle {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 2px solid #000;
            border-radius: 50%;
            text-align: center;
            line-height: 26px;
        }

        .highlighted {
            position: relative;
        }

        .highlighted::after {
            content: '';
            position: absolute;
            width: 30px;
            height: 30px;
            border: 2px solid #f00;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .symbol-buttons {
            display: flex;
            justify-content: space-around;
            margin-top: 20px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 8px;
        }

        .symbol-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid #000;
            background-color: #fff;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s, background-color 0.3s;
        }

        .symbol-btn:hover {
            background-color: #f5f5f5;
            transform: scale(1.1);
        }

        .symbol-btn:active {
            transform: scale(0.95);
        }

        /* 表单样式 */
        .form-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }

        .form-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            width: 400px;
            max-width: 90%;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            transform: translateY(-20px);
            transition: transform 0.3s;
        }

        .form-overlay.active .form-container {
            transform: translateY(0);
        }

        .form-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .form-title {
            font-size: 18px;
            font-weight: bold;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: var(--secondary-color);
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .form-input:focus {
            outline: none;
            border-color: #666;
        }

        .form-input.error {
            border-color: var(--error-color);
        }

        .error-message {
            color: var(--error-color);
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .error-message.active {
            display: block;
        }

        .form-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
        }

        .form-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
            margin-left: 10px;
        }

        .form-btn-cancel {
            background-color: #e0e0e0;
        }

        .form-btn-submit {
            background-color: #1976d2;
            color: white;
        }

        .form-btn-cancel:hover {
            background-color: #d0d0d0;
        }

        .form-btn-submit:hover {
            background-color: #1565c0;
        }

        /* 成功提示 */
        .success-animation {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: var(--success-color);
            color: white;
            padding: 15px 20px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            z-index: 1001;
            transform: translateX(120%);
            transition: transform 0.3s ease-out;
        }

        .success-animation.active {
            transform: translateX(0);
        }

        .success-icon {
            margin-right: 10px;
        }

        /* 详细信息展开面板 */
        .details-panel {
            background-color: #f9f9f9;
            padding: 15px;
            margin: 10px 0;
            border-radius: 4px;
            border-left: 4px solid #1976d2;
            display: none;
        }

        .details-panel.active {
            display: block;
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .details-row {
            display: flex;
            margin-bottom: 8px;
        }

        .details-label {
            font-weight: bold;
            width: 100px;
            flex-shrink: 0;
        }

        .details-value {
            flex-grow: 1;
        }

        /* 批量操作工具栏 */
        .batch-toolbar {
            display: none;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 4px;
            margin-bottom: 15px;
            align-items: center;
            animation: slideDown 0.3s ease-out;
        }

        .batch-toolbar.active {
            display: flex;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .batch-info {
            margin-right: 20px;
        }

        .batch-actions {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <button class="btn" id="exitBtn">退出</button>
            <button class="btn" id="deleteBtn">删除</button>
            <div class="title">
                1 台州和群
                <div class="date">2025年3月22日</div>
            </div>
            <button class="btn" id="restoreBtn">新增</button>
            <!-- <button class="btn" id="spreadBtn">撒销</button> -->
        </div>

        <!-- 批量操作工具栏 -->
        <div class="batch-toolbar" id="batchToolbar">
            <div class="batch-info">已选择 <span id="selectedCount">0</span> 项</div>
            <div class="batch-actions">
                <button class="btn" id="batchDeleteBtn">批量删除</button>
                <button class="btn" id="batchCancelBtn">取消选择</button>
            </div>
        </div>

        <div class="number-grid" id="numberGrid">
            <!-- 表头行 -->
            <div class="grid-row">
                <div class="grid-cell grid-header">0</div>
                <div class="grid-cell grid-header">1</div>
                <div class="grid-cell grid-header">2</div>
                <div class="grid-cell grid-header">3</div>
                <div class="grid-cell grid-header">4</div>
                <div class="grid-cell grid-header">5</div>
                <div class="grid-cell grid-header">6</div>
                <div class="grid-cell grid-header">7</div>
                <div class="grid-cell grid-header">8</div>
                <div class="grid-cell grid-header">9</div>
                <div class="grid-cell grid-header">10</div>
                <div class="grid-cell grid-header">11</div>
                <div class="grid-cell grid-header">12</div>
                <div class="grid-cell grid-header">13</div>
                <div class="grid-cell grid-header">14</div>
                <div class="grid-cell grid-header">15</div>
                <div class="grid-cell grid-header">16</div>
                <div class="grid-cell grid-header">17</div>
                <div class="grid-cell grid-header">18</div>
            </div>

            <!-- 第一行符号 -->
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <!-- 第二行符号 -->
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>

            <!-- 第三行数字 -->
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol">丨</span></div>
            <div class="grid-cell"><span class="symbol">刂</span></div>
            <div class="grid-cell"><span class="symbol">川</span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell highlighted"><span class="circle"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>


            <!-- 第四行数字 -->
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell highlighted"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>

            <!-- 第五行数字 -->

            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;">丨</span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;">ㄨ</span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>
            <div class="grid-cell" style=" background-color: #f0f0f0"><span class="circle"
                    style="background-color: #666; color: white;"></span></div>


            <!-- 第六行数字 -->
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell highlighted"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>

            <!-- 第七行数字 -->
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell highlighted"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>

            <!-- 第八行数字 -->
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell highlighted"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>

            <!-- 第九行数字 -->
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell highlighted"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>

            <!-- 第十行符号 -->
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>

            <!-- 第十一行符号 -->
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>
            <div class="grid-cell"><span class="symbol"></span></div>

            <!-- 动态生成底部数字 -->
            <script>
                // 动态生成底部数字行
                const numberRow = document.createElement('div');
                numberRow.className = 'grid-row';

                // 获取第五行符号数据（假设存储在symbolsArray[4]）
                const fifthRowSymbols = symbolsArray[4] || [];
                fifthRowSymbols.forEach(symbol => {
                    const cell = document.createElement('div');
                    cell.className = 'grid-cell';
                    const number = getMappedNumber(symbol);
                    cell.innerHTML = `<span class="number">${number}</span>`;
                    numberRow.appendChild(cell);
                });

                document.querySelector('.grid-container').appendChild(numberRow);
            </script>
            <div class="grid-cell"><span class="number">2</span></div>
            <div class="grid-cell"><span class="number">5</span></div>
            <div class="grid-cell"><span class="number">1</span></div>
            <div class="grid-cell"><span class="number">2</span></div>
            <div class="grid-cell"><span class="number">6</span></div>
            <div class="grid-cell"><span class="number">1</span></div>
            <div class="grid-cell"><span class="number">2</span></div>
            <div class="grid-cell"><span class="number">6</span></div>
            <div class="grid-cell"><span class="number">6</span></div>
            <div class="grid-cell"><span class="number">2</span></div>
            <div class="grid-cell"><span class="number">5</span></div>
            <div class="grid-cell"><span class="number">1</span></div>
            <div class="grid-cell"><span class="number">2</span></div>
            <div class="grid-cell"><span class="number">6</span></div>
            <div class="grid-cell"><span class="number">1</span></div>
            <div class="grid-cell"><span class="number">2</span></div>
            <div class="grid-cell"><span class="number">6</span></div>
            <div class="grid-cell"><span class="number">6</span></div>
            <div class="grid-cell"><span class="number">6</span></div>
        </div>

        <!-- 详细信息面板 -->
        <div class="details-panel" id="detailsPanel">
            <div class="details-row" style="flex-wrap: nowrap;">
                <div class="details-label">位置:</div>
                <div class="details-value" id="detailPosition">行 <span id="detailRow">0</span>, 列 <span
                        id="detailCol">0</span></div>
                <div class="details-label">符号:</div>
                <div class="details-value" id="detailSymbol">-</div>
                <div class="details-label">对应数字:</div>
                <div class="details-value" id="detailNumber">-</div>
                <div class="details-label">备注:</div>
                <div class="details-value" id="detailNote">无</div>
            </div>
        </div>

        <div class="symbol-buttons">
            <button class="symbol-btn" id="btn1" data-symbol="丨">丨</button>
            <button class="symbol-btn" id="btn2" data-symbol="刂">刂</button>
            <button class="symbol-btn" id="btn3" data-symbol="川">川</button>
            <button class="symbol-btn" id="btn4" data-symbol="ㄨ">ㄨ</button>
            <button class="symbol-btn" id="btn5" data-symbol="ㄎ">ㄎ</button>
            <button class="symbol-btn" id="btn6" data-symbol="ㄦ">ㄦ</button>
        </div>
    </div>

    <!-- 添加符号表单 -->
    <div class="form-overlay" id="addSymbolForm">
        <div class="form-container">
            <div class="form-header">
                <div class="form-title">添加新符号</div>
                <button class="close-btn" id="closeFormBtn">&times;</button>
            </div>
            <div class="form-group">
                <label class="form-label">符号类型</label>
                <select class="form-input" id="symbolType">
                    <option value="circle">圆圈符号</option>
                    <option value="line">线条符号</option>
                    <option value="special">特殊符号</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">符号内容</label>
                <input type="text" class="form-input" id="symbolContent" placeholder="请输入符号内容">
                <div class="error-message" id="symbolContentError">符号内容不能为空</div>
            </div>
            <div class="form-group">
                <label class="form-label">位置 (行)</label>
                <input type="number" class="form-input" id="symbolRow" min="1" max="13" placeholder="请输入行号">
                <div class="error-message" id="symbolRowError">请输入1-13之间的数字</div>
            </div>
            <div class="form-group">
                <label class="form-label">位置 (列)</label>
                <input type="number" class="form-input" id="symbolCol" min="1" max="19" placeholder="请输入列号">
                <div class="error-message" id="symbolColError">请输入1-19之间的数字</div>
            </div>
            <div class="form-group">
                <label class="form-label">备注</label>
                <textarea class="form-input" id="symbolNote" rows="3" placeholder="可选备注信息"></textarea>
            </div>
            <div class="form-actions">
                <button class="form-btn form-btn-cancel" id="cancelFormBtn">取消</button>
                <button class="form-btn form-btn-submit" id="submitFormBtn">提交</button>
            </div>
        </div>
    </div>

    <!-- 成功提示 -->
    <div class="success-animation" id="successMessage">
        <span class="success-icon">✓</span>
        <span>操作成功完成！</span>
    </div>

    <script>
        // 添加波纹效果
        function createRipple(event) {
            const button = event.currentTarget;

            const circle = document.createElement("span");
            const diameter = Math.max(button.clientWidth, button.clientHeight);
            const radius = diameter / 2;

            circle.style.width = circle.style.height = `${diameter}px`;
            circle.style.left = `${event.clientX - button.getBoundingClientRect().left - radius}px`;
            circle.style.top = `${event.clientY - button.getBoundingClientRect().top - radius}px`;
            circle.classList.add("ripple");

            const ripple = button.getElementsByClassName("ripple")[0];
            if (ripple) {
                ripple.remove();
            }

            button.appendChild(circle);
        }

        // 为所有按钮添加波纹效果
        const buttons = document.querySelectorAll('.btn, .form-btn, .symbol-btn');
        buttons.forEach(button => {
            button.addEventListener('click', createRipple);
        });

        // 符号-数字映射表
        const symbolNumberMap = {
            "": "-",
            "丨": "1",
            "刂": "2",
            "川": "3",
            "ㄨ": "4",
            "ㄎ": "5",
            "ㄦ": "6",
            "O": "引",
            "—": "大斗",
            "＝": "小斗",
            "/": "大避",
            "//": "小避"
        };

        function getMappedNumber(symbol) {
            return symbolNumberMap[symbol] || '庄';
        }

        // 表格行选择和详情展示
        const gridCells = document.querySelectorAll('.grid-cell:not(.grid-header)');
        const detailsPanel = document.getElementById('detailsPanel');
        const detailRow = document.getElementById('detailRow');
        const detailCol = document.getElementById('detailCol');
        const detailSymbol = document.getElementById('detailSymbol');
        const detailNumber = document.getElementById('detailNumber');
        const detailNote = document.getElementById('detailNote');

        // 创建行对象以便于选择
        const createRows = () => {
            const rows = [];
            const totalCols = 19;

            // 跳过表头行
            for (let i = totalCols; i < gridCells.length; i += totalCols) {
                const rowCells = Array.from(gridCells).slice(i, i + totalCols);
                const rowElement = document.createElement('div');
                rowElement.classList.add('grid-row');
                rowElement.dataset.rowIndex = Math.floor(i / totalCols);

                // 将单元格添加到行的dataset中
                rowElement.dataset.cells = rowCells.map((cell, index) => {
                    cell.id = `cell-${Math.floor(i / totalCols)}-${index}`;
                    cell.dataset.rowIndex = Math.floor(i / totalCols);
                    cell.dataset.colIndex = index;
                    return cell.outerHTML;
                }).join('');

                rows.push(rowElement);
            }

            return rows;
        };

        const rows = createRows();

        // 单元格点击事件
        gridCells.forEach((cell, index) => {
            if (!cell.classList.contains('grid-header')) {
                cell.addEventListener('click', function () {
                    // 计算行列位置
                    const rowIndex = parseInt(this.dataset.rowIndex) || Math.floor(index / 14);
                    const colIndex = parseInt(this.dataset.colIndex) || (index % 19);

                    // 获取符号内容
                    const symbolElement = this.querySelector('.symbol, .circle');
                    const symbolContent = symbolElement ? symbolElement.textContent : '-';

                    // 获取映射数字
                    const number = getMappedNumber(symbolContent);

                    // 更新详情面板
                    detailRow.textContent = rowIndex;
                    detailCol.textContent = colIndex;
                    detailSymbol.textContent = symbolContent;
                    detailNumber.textContent = number;

                    // 显示详情面板
                    detailsPanel.classList.add('active');

                    // 切换行选中状态
                    const rowElement = this.closest('.grid-row');
                    if (rowElement) {
                        document.querySelectorAll('.grid-row.selected').forEach(row => {
                            if (row !== rowElement) row.classList.remove('selected');
                        });
                        rowElement.classList.toggle('selected');

                        // 更新批量操作工具栏
                        updateBatchToolbar();
                    }
                });

                // 添加双击事件打开编辑表单
                cell.addEventListener('dblclick', function () {
                    openAddSymbolForm(this);
                });
            }
        });

        // 批量操作工具栏更新
        function updateBatchToolbar() {
            const selectedRows = document.querySelectorAll('.grid-row.selected');
            const batchToolbar = document.getElementById('batchToolbar');
            const selectedCount = document.getElementById('selectedCount');

            if (selectedRows.length > 0) {
                selectedCount.textContent = selectedRows.length;
                batchToolbar.classList.add('active');
            } else {
                batchToolbar.classList.remove('active');
            }
        }

        // 取消选择按钮
        document.getElementById('batchCancelBtn').addEventListener('click', function () {
            document.querySelectorAll('.grid-row.selected').forEach(row => {
                row.classList.remove('selected');
            });
            updateBatchToolbar();
        });

        // 批量删除按钮
        document.getElementById('batchDeleteBtn').addEventListener('click', function () {
            const selectedRows = document.querySelectorAll('.grid-row.selected');
            if (selectedRows.length > 0 && confirm(`确定要删除选中的 ${selectedRows.length} 项吗？`)) {
                selectedRows.forEach(row => {
                    // 在实际应用中，这里应该发送删除请求到服务器
                    // 这里仅做演示，清空选中行的内容
                    row.querySelectorAll('.symbol, .circle').forEach(symbol => {
                        symbol.textContent = '';
                    });
                    row.classList.remove('selected');
                });
                updateBatchToolbar();
                showSuccessMessage('批量删除成功');
            }
        });

        // 表单验证和提交
        const addSymbolForm = document.getElementById('addSymbolForm');
        const symbolContent = document.getElementById('symbolContent');
        const symbolRow = document.getElementById('symbolRow');
        const symbolCol = document.getElementById('symbolCol');
        const symbolContentError = document.getElementById('symbolContentError');
        const symbolRowError = document.getElementById('symbolRowError');
        const symbolColError = document.getElementById('symbolColError');

        // 打开添加符号表单
        function openAddSymbolForm(cell = null) {
            // 如果传入了单元格，预填充表单
            if (cell) {
                const rowIndex = parseInt(cell.dataset.rowIndex) || 0;
                const colIndex = parseInt(cell.dataset.colIndex) || 0;

                symbolRow.value = rowIndex + 1;
                symbolCol.value = colIndex + 1;

                const symbolElement = cell.querySelector('.symbol, .circle');
                if (symbolElement) {
                    symbolContent.value = symbolElement.textContent;

                    if (symbolElement.classList.contains('circle')) {
                        document.getElementById('symbolType').value = 'circle';
                    } else if (symbolElement.classList.contains('symbol')) {
                        document.getElementById('symbolType').value = 'special';
                    }
                }
            }

            addSymbolForm.classList.add('active');
        }

        // 关闭表单
        function closeAddSymbolForm() {
            addSymbolForm.classList.remove('active');
            resetForm();
        }

        // 重置表单
        function resetForm() {
            symbolContent.value = '';
            symbolRow.value = '';
            symbolCol.value = '';
            document.getElementById('symbolNote').value = '';
            document.getElementById('symbolType').value = 'circle';

            // 重置错误提示
            symbolContent.classList.remove('error');
            symbolRow.classList.remove('error');
            symbolCol.classList.remove('error');
            symbolContentError.classList.remove('active');
            symbolRowError.classList.remove('active');
            symbolColError.classList.remove('active');
        }

        // 验证表单
        function validateForm() {
            let isValid = true;

            // 验证符号内容
            if (!symbolContent.value.trim()) {
                symbolContent.classList.add('error');
                symbolContentError.classList.add('active');
                isValid = false;
            } else {
                symbolContent.classList.remove('error');
                symbolContentError.classList.remove('active');
            }

            // 验证行号
            const rowValue = parseInt(symbolRow.value);
            if (isNaN(rowValue) || rowValue < 1 || rowValue > 13) {
                symbolRow.classList.add('error');
                symbolRowError.classList.add('active');
                isValid = false;
            } else {
                symbolRow.classList.remove('error');
                symbolRowError.classList.remove('active');
            }

            // 验证列号
            const colValue = parseInt(symbolCol.value);
            if (isNaN(colValue) || colValue < 1 || colValue > 19) {
                symbolCol.classList.add('error');
                symbolColError.classList.add('active');
                isValid = false;
            } else {
                symbolCol.classList.remove('error');
                symbolColError.classList.remove('active');
            }

            return isValid;
        }

        // 实时验证
        symbolContent.addEventListener('input', function () {
            if (this.value.trim()) {
                this.classList.remove('error');
                symbolContentError.classList.remove('active');
            }
        });

        symbolRow.addEventListener('input', function () {
            const value = parseInt(this.value);
            if (!isNaN(value) && value >= 1 && value <= 13) {
                this.classList.remove('error');
                symbolRowError.classList.remove('active');
            }
        });

        symbolCol.addEventListener('input', function () {
            const value = parseInt(this.value);
            if (!isNaN(value) && value >= 1 && value <= 19) {
                this.classList.remove('error');
                symbolColError.classList.remove('active');
            }
        });

        // 提交表单
        document.getElementById('submitFormBtn').addEventListener('click', function () {
            if (validateForm()) {
                // 获取表单数据
                const type = document.getElementById('symbolType').value;
                const content = symbolContent.value.trim();
                const row = parseInt(symbolRow.value) - 1;
                const col = parseInt(symbolCol.value) - 1;
                const note = document.getElementById('symbolNote').value.trim();

                // 计算单元格索引
                const targetCell = document.getElementById(`cell-${row}-${col}`);

                if (targetCell) {
                    // 清空单元格现有内容
                    targetCell.innerHTML = '';

                    // 创建新符号
                    const newSymbol = document.createElement('span');
                    newSymbol.textContent = content;

                    if (type === 'circle') {
                        newSymbol.classList.add('circle');
                    } else {
                        newSymbol.classList.add('symbol');
                    }

                    // 添加到单元格
                    targetCell.appendChild(newSymbol);

                    // 保存备注信息到dataset
                    if (note) {
                        targetCell.dataset.note = note;
                        detailNote.textContent = note;
                    }

                    // 关闭表单并显示成功消息
                    closeAddSymbolForm();
                    showSuccessMessage('符号添加成功');
                    renderGrid(); // 重新渲染网格以更新底部数字行
                }
            }
        });

        // 关闭表单按钮
        document.getElementById('closeFormBtn').addEventListener('click', closeAddSymbolForm);
        document.getElementById('cancelFormBtn').addEventListener('click', closeAddSymbolForm);

        // 显示成功消息
        function showSuccessMessage(message) {
            const successMessage = document.getElementById('successMessage');
            successMessage.textContent = message;
            successMessage.classList.add('active');

            setTimeout(() => {
                successMessage.classList.remove('active');
            }, 3000);
        }

        // 符号按钮点击事件
        document.querySelectorAll('.symbol-btn').forEach(btn => {
            btn.addEventListener('click', function () {
                const symbol = this.dataset.symbol;
                symbolContent.value = symbol;

                // 如果表单未打开，则打开表单
                if (!addSymbolForm.classList.contains('active')) {
                    openAddSymbolForm();
                }
            });
        });

        // 状态切换动效
        function addStatusTransition(element, newStatus) {
            // 添加淡出效果
            element.style.transition = 'opacity 0.3s';
            element.style.opacity = '0';

            setTimeout(() => {
                // 更改状态
                element.textContent = newStatus;

                // 根据状态更改样式
                element.className = 'status-tag';
                if (newStatus === '使用中') {
                    element.classList.add('status-using');
                } else if (newStatus === '仓储') {
                    element.classList.add('status-storage');
                }

                // 添加淡入效果
                element.style.opacity = '1';
            }, 300);
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function () {
            // 创建行元素
            const grid = document.getElementById('numberGrid');
            rows.forEach(row => {
                grid.appendChild(row);
            });

            // 添加退出按钮事件
            document.getElementById('exitBtn').addEventListener('click', function () {
                if (confirm('确定要退出吗？')) {
                    window.location.href = 'index.html';
                }
            });
        });
    </script>
</body>

</html>